<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="pageActions.handleAdd()">添加</el-button>
        </div>
      </template>

      <el-table v-loading="pageState.loading" :data="pageState.data" style="width: 100%">
        <el-table-column label="地区">
          <template #default="{ row }">
            <el-button
              link
              type="primary"
              @click="
                $router.push({
                  path: 'area/module',
                  query: {
                    workspace: row.areaName,
                  },
                })
              "
            >
              {{ row.areaName }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column prop="createdAt" label="创建时间"></el-table-column>

        <el-table-column label="操作" fixed="right" width="350px">
          <template #default="{ row }">
            <el-button link type="primary" icon="edit" @click="pageActions.handleEdit(row)"> 编辑 </el-button>
            <el-button link type="primary" icon="delete" @click="pageActions.handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <template #footer>
      <el-pagination
        @size-change="pageActions.handleSizeChange"
        @current-change="pageActions.handlePageChange"
        :current-page="pageState.page"
        :page-size="pageState.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageState.total"
      ></el-pagination>
    </template>

    <!-- 新增/编辑 -->
    <jax-dialog-edit
      v-model="pageState.detail"
      v-model:show="pageState.shwoEdit"
      :json="json"
      @submit="pageActions.handleSubmit()"
    ></jax-dialog-edit>
  </app-page>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { http, usePageList } from 'jax-node'
import Clipboard from '@/components/Clipboard.vue'

const { pageState, pageActions } = usePageList()

const fixed = false
const required = true
const miniInput = { style: 'width:100px' }
const json = computed(() => {
  return [{ name: 'areaName', label: '地区名称', required }]
})
</script>
